import React, { useState, useContext } from 'react';
import { Message, Button, Upload, Spin, Modal, Table } from 'antd';
import { InboxOutlined } from '@ant-design/icons';
import styles from './style.module.scss';

import Drawer from 'components/Drawer';
import service from 'service';
import { HomeContext } from '../context';

const { Dragger } = Upload;

// 账户编辑
const BatchDelete = (props) => {
    const {
        getList,
        setType,
        batchDeleteVisible, setBatchDeleteVisible,
        batchDeleteLoading, setBatchDeleteLoading,
        selectedRowKeys, setSelectedRowKeys,
        selectedRows, setSelectedRows,
        showBatchDeleteRowHandle, showBatchDeleteRowHandleCancel, showBatchDeleteHandle,
    } = useContext(HomeContext);

    const modalCancelHandle = () => {
        setBatchDeleteVisible(false)
    }
    const batchDeleteHandle = () => {
        setBatchDeleteLoading(true)
        let params = { ids: selectedRowKeys.toString() }
        service.account.deleteMultiple(params).then(result => {
            console.log('执行结果', result)
            if (result) {
                Message.success('删除成功')
                setBatchDeleteVisible(false)
                setType('');
                setSelectedRowKeys([])
                setSelectedRows([])
                getList();
            }
        }).finally(() => {
            setBatchDeleteLoading(false)
        })
    }
    return (
        <Modal
            title="批量删除"
            visible={batchDeleteVisible}
            onCancel={modalCancelHandle}
            width={700}
            closable={false}
            footer={[
                <Button onClick={modalCancelHandle}>取消</Button>,
                <Button type="primary" loading={batchDeleteLoading} onClick={batchDeleteHandle}>确认</Button>,
            ]}
        >
            <Table
                columns={[
                    { title: '序号', dataIndex: 'index', width: 50, render: (text, record, index) => (index + 1) },
                    { title: '数据ID', dataIndex: 'id', width: 100 },
                    { title: '网站名称', dataIndex: 'site', width: 150, },
                    { title: '注册账户', dataIndex: 'account', width: 100, },
                    { title: '...', dataIndex: 'other', width: 50, render: () => '...' },
                ]}
                dataSource={selectedRows}
                rowKey="id"
                pagination={false}
                className={styles.customTable}
            />
        </Modal>
    )
}

export default BatchDelete;